<template>
  <div class="page-container">
    <el-row>
        <el-button size="small" type="primary" @click="addLogistic">添加运费模板</el-button>
    </el-row>
    <div class="table-list">
        <el-table :data="list" size="small">
            <!-- <el-table-column label="ID" prop="id"></el-table-column> -->
            <el-table-column label="模板名称" prop="name"></el-table-column>
            <el-table-column label="计费方式" prop="valuationModel">
				<template #default="scope">
				    <el-tag effect="light" size="small" > {{ scope.row.valuationModel == '0'?'按件数':(scope.row.valuationModel == '1'?'按重量':'按体积') }} </el-tag>
				</template>
			</el-table-column>
            <el-table-column label="是否指定包邮" prop="isInclPostageByif">
				<template #default="scope">
				    <el-tag effect="light" size="small" > {{ scope.row.isInclPostageByif == '0'?'是':'否' }} </el-tag>
				</template>
			</el-table-column>
			<el-table-column v-if="false" label="是否指定不送达" prop="noDelivery">
				<template #default="scope">
				    <el-tag effect="light" size="small" > {{ scope.row.noDelivery == '0'?'是':'否' }} </el-tag>
				</template>
			</el-table-column>
          <el-table-column label="是否默认" prop="isDefault">
				<template #default="scope">
				    <el-switch size="small" v-model="scope.row.isDefault" :active-value="'1'" :inactive-value="'0'" :active-text="scope.row.isDefault == 1 ? '默认' : '不默认'" @change="changeStatus(scope.row)"></el-switch>
				</template>
          </el-table-column>
            <el-table-column label="添加时间" prop="createTime"></el-table-column>
            <el-table-column label="操作" align="center" fixed="right">
                <template #default="scope">
                    <el-button type="primary" link size="small" @click="editRow(scope.row)">修改</el-button>
                    <el-button type="primary" link size="small" @click="delRow(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="page-block">
        <el-pagination
            v-model:currentPage="current"
            v-model:page-size="page"
            :page-sizes="[10, 20, 30, 40]"
            :small="true"
            :disabled="false"
            :background="false"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :hide-on-single-page="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </div>
    <logistic-detail v-model:dialogDrawer="dialogFormVisible" :defaultForm="form" :title="title" @onDetailSubmit="onDetailSubmit"></logistic-detail>
  </div>
</template>

<script>
import { reactive, toRefs,onMounted } from 'vue'
import LogisticDetail from '../components/LogisticDetail.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { pageList,get,updateStatus,getList,remove } from '/@/api/pms/freight'
import api from '/@/api/commonApi'
export default {
    name: 'Logistic',
    components: {
        LogisticDetail
    },
    setup() {
        const state = reactive({
            list: [],
			search:{
				current: 1,
				size: 10
			},
            title: '新增运费模板',
            form: {},
            dialogFormVisible: false,
            total: 100,
            current: 1,
            page: 10,
        })
        const addLogistic = () => {
			restForm()
            state.title = '新增运费模板'
            state.dialogFormVisible = true
        }
        const editRow = row => {
            state.title = '编辑运费模板'
			get(row.id).then(res=>{
				state.form = res.data
				state.form.valuationModel = parseInt(res.data.valuationModel)
				state.form.isInclPostageByif =parseInt(res.data.isInclPostageByif)
				state.form.noDelivery =parseInt(res.data.noDelivery)
				state.form.isDefault =parseInt(res.data.isDefault)
			})
            state.dialogFormVisible = true
        }
		const restForm = ()=>{
			state.form = {
				id:null,
				valuationModel: 0,
				isInclPostageByif: 0,
				noDelivery: 1,
				isDefault: 1,
				//运送方式
				transportMode: [{
				    area: [{
				        label: '全国',
				        id: 0
				    }],
				    firstNum: 1,
				    firstPrice: 0,
				    continueNum: 1,
				    continuePrice: 0
				}],
				// 指定包邮
				freeConditions: [],
				// 指定不送达
				noDeliverys: []
			}
		}
        const delRow = row => {
            ElMessageBox.confirm(
                '是否确认删除名称为"' + row.name + '"的数据项？',
                '提示',
                {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                }
            ).then(() => {
				remove(row.id).then(res=>{
				  if(res.code == 0){
					  ElMessage({
						type: 'success',
						message: '删除成功',
					  })
					  getList()
				  }else{
					  ElMessage({
						type: 'error',
						message: '删除失败：'+res.message,
					  })
				  }
				})
				
            }).catch()
        }
        const getList = () => {
			api.workTemplate(state.search).then(res=>{
				state.list = res.data.records
				state.total = res.data.total
			})
        }
        const handleSizeChange = () => {
            getList()
        }
        const handleCurrentChange = e => {
            state.current = e
            getList()
        }
		const onDetailSubmit = () => {
			 getList()
			 state.dialogFormVisible = false
		}
		const changeStatus = (row) => {
			updateStatus({id:row.id,isDefault:row.isDefault}).then(res=>{
				if(res.code == 0){
					ElMessage.success('修改成功')
					getList()
				}else{
					ElMessage.error('修改失败:'+res.message)
				}
			})
		}
		
		
		onMounted(()=>{
			 getList()
		})
        return {
            addLogistic,
            editRow,
            delRow,
            handleSizeChange,
            handleCurrentChange,
			onDetailSubmit,
			restForm,
			changeStatus,
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss" scoped>
.page-container{
    .table-list{
        background: var(--next-color-white);
        margin-top: 10px;
        :deep(.el-table__header-wrapper .el-table__cell) {
            background: var(--el-color-primary-light-9);
            color: var(--next-bg-menuBar-light-1);
        }
    }
}
</style>